<style>
    .home {
        width: 100vw;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: auto;
        justify-content: stretch;
    }


    .banner {
        box-sizing: border-box;
        font-weight: 900;
        font-size: 1.2em;
        display: flex;
        padding: 0.5em;
        flex-direction: row;
        width: 100%;
        background: gray;
        justify-content: space-between;
    }

    .client-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .client-wrap[row] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .client-title {
        background-color: green;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }
</style>

<dom>
    <div class="home">
        <div class="banner">
            <div>Debuger</div>
            <div class="row" style="flex:1">
                <input $="ebUrl" @input="onEditUrl" style="flex:1" />
                <button @click="onClickSettings">设置</button>
                <button @click="onChangeColumn">列切换</button>
                <button @click="onClickAddClient">+客户端</button>
            </div>
        </div>
        <div $="clientWrap" class="client-wrap">

        </div>
    </div>

</dom>